<template>
  <view class="page">
    <uni-nav-bar
      v-if="showLeft"
      fixed
      :border="false"
      background-color="transparent"
      left-icon="left"
      height="120rpx"
      :title="$t('login.title')"
      @clickLeft="onBack"></uni-nav-bar>
    <uni-nav-bar
      v-else
      fixed
      :border="false"
      background-color="transparent"
      height="120rpx"
      :title="$t('login.title')"></uni-nav-bar>
    <view class="top-logo">
      <image
        src="/static/logo-1.svg"
        mode="heightFix"
        style="height: 160rpx"></image>
    </view>

    <view class="form">
      <view class="tab">
        <view
          :class="loginType == 2 ? 'select type2' : 'type2'"
          @click="loginType = 2">
          {{ $t('phone.login.name1') }}
        </view>
        <view
          :class="loginType == 1 ? 'select type1' : 'type1'"
          @click="loginType = 1">
          {{ $t('phone.login.name2') }}
        </view>
      </view>
      <view class="inputs_button">
        <view class="public-form_index">
          <input
            v-model="formData.name"
            :title="$t(loginType === 2 ? 'apply.phone' : 'form.email.title2')"
            :type="loginType === 2 ? 'number' : ''"
            :placeholder="$t(loginType === 2 ? 'form.phone.comment' : 'form.email.comment')"
            class="public-form_input public-form_top" />
          <!-- <view class="public-form_code public-form_top">
            <input
              v-model="formData.code"
              :placeholder="$t('form.code.title')"
              class="code" />
            <code-img
              :key="loginType"
              v-model="formData.uuid" />
          </view> -->
          <view class="public-form_code public-form_top">
            <input
              v-model="formData.password"
              :title="$t('form.password3')"
              :type="pwdShow ? 'text' : 'password'"
              :adjust-position="false"
              :placeholder="$t('form.password')"
              class="password" />
            <uni-icons
              :type="pwdShow ? 'eye-filled' : 'eye-slash-filled'"
              size="24"
              color="#cccccc"
              @click="pwdShow = !pwdShow"></uni-icons>
          </view>
        </view>
        <view class="operate">
          <text @click="onSignUp">{{ $t('login.register') }}</text>
          <!-- <text>忘记密码</text> -->
        </view>
        <view class="button">
          <view @click="onLogin">
            {{ $t('login.title') }}
          </view>
        </view>
      </view>
    </view>
    <view class="public-bottom_phone">
      <view
        class="phone"
        @click="onOpenChat">
        <uni-icons
          type="phone"
          size="20"
          color="#fff"></uni-icons>
      </view>
      <text
        class="phone-text"
        @click="onOpenChat"
        >{{ $t('service.title') }}</text
      >
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useUser } from '@/hooks/useUser'
  import { useChat } from '@/hooks/useChat'
  import { onLoad } from '@dcloudio/uni-app'
  import { useValidations } from '@/hooks/useValidations'

  const { onOpenChat } = useChat()

  const { t } = useI18n()

  const { login } = useUser()

  const { validatePhone } = useValidations()

  const onBack = () => {
    // const pages = getCurrentPages()
    // console.log(pages, '==222==')

    uni.redirectTo({
      url: '/pages/index/index'
    })
  }

  /** 登录方式：邮箱 1 手机 2 */
  const loginType = ref(2)
  const pwdShow = ref(false)

  const formData = reactive({
    uuid: '',
    code: '',
    name: '',
    password: ''
  })

  watch(
    () => loginType.value,
    () => {
      // formData.uuid = ''
      // formData.code = ''
      formData.name = ''
      formData.password = ''
    }
  )

  const onLogin = () => {
    const { uuid, code, password, name } = formData

    const show = loginType.value === 2

    if (!name) {
      uni.showToast({
        title: t(show ? `form.phone.comment` : `form.email.comment`),
        icon: 'none'
      })
      return
    }

    if (show && validatePhone(name)) {
      return
    }

    // if (!code) {
    //   uni.showToast({
    //     title: t('form.code.title'),
    //     icon: 'none'
    //   })
    //   return
    // }

    if (!password) {
      uni.showToast({
        title: t('form.password'),
        icon: 'none'
      })
      return
    }

    login({
      code,
      password,
      uuid,
      email: show ? '' : name,
      mobile: show ? name : '',
      type: loginType.value
    })
  }

  const onSignUp = () => {
    uni.navigateTo({
      url: '/pages/login/sign-up'
    })
  }

  // 左边箭头是否显示
  const showLeft = ref(true)
  onLoad(() => {
    showLeft.value = uni.getStorageSync('isBlack')
  })
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background: url('/static/bg/login.png') no-repeat top center, #e2ecf8;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top-logo {
      height: 340rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .form {
      // flex: 1;
      padding-bottom: 80rpx;
      margin: 0 32rpx;
      border-radius: 40rpx;
      background-color: #fff;
      overflow: hidden;

      .tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ecf1fb;
        height: 100rpx;
        background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);

        view {
          width: 340rpx;
          line-height: 100rpx;
          text-align: center;
          color: #9e9e9e;
          position: relative;
        }

        view::after {
          content: '';
          width: 50rpx;
          height: 8rpx;
          display: block;
          background-color: #3264ed;
          border-radius: 4rpx;
          position: absolute;
          left: 50%;
          bottom: 14rpx;
          transform: translateX(-50%);
          opacity: 0;
        }

        view.select {
          background-color: #fff;
          color: #3264ed;
        }

        view.type1.select {
          border-radius: 0 40rpx 0 0;
        }

        view.type2.select {
          border-radius: 40rpx 0 0;
        }

        view.select::after {
          opacity: 1;
        }
      }

      .inputs_button {
        background-color: #fff;

        .operate {
          display: flex;
          justify-content: space-between;
          padding: 24rpx 32rpx 60rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          color: #999999;

          text {
            &:first-child {
              color: #3462fe;
            }
          }
        }

        .button {
          padding: 0 32rpx;

          view {
            border-radius: 64rpx;
            line-height: 96rpx;
            text-align: center;
            background-color: #3264ed;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #ffffff;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }

    .pact {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 120rpx;
      font-size: 24rpx;

      text {
        color: #3264ed;
      }

      radio {
        :deep(.uni-radio-input) {
          border: 1rpx solid #3264ed;
        }

        transform: scale(0.6);
      }
    }
  }
</style>
